import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import router from './routes';
import { Provider } from 'react-redux';
import store from './store';
import Toast from './components/Toast';
import '@/assets/style/common.less';
import Loading from './components/LoadingIcon';
import LoadingIcon from './components/LoadingIcon';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <Provider store={store}>
    <Toast />
    {/* <Loading /> */}
    {/* 通常会使用 Suspense 配合路由的懒加载 ， 可能进行懒加载的组件比较庞大，或者用户的网络不好，建议要使用一个等待的提示给用户 */}
    <Suspense fallback={<LoadingIcon />}>{router}</Suspense>
  </Provider>
);
